<template>
  <div class="page">
    <back-btn></back-btn>
    <div class="page-wrap">
      <div class="head">
        <div class="tab_bubble">
          <span class="bubble"></span>
          <div class="title">大学列表</div>
        </div>
        <search @search="search"></search>
      </div>
    </div>
    <div>
      <screenNo :no="[3]" @screenClick="bindScreen"></screenNo>
      <div class="mt20">
        <select-grade @event="bindGrade" class="mr20"></select-grade>
        <select-sort :no="[0,1]" :active="selectSortVal" @event="bindSort" v-show="params.gradeId === 0"></select-sort>
      </div>
    </div>
    <div class="content scroll-wrap">
      <!-- <div class="picker">
        <div v-for="(item,index) in pickerList" :key="index">
          <span>{{item.title}}</span>
          <div>
            <span v-for="(obj,i) in item.data" :key="i" :class="pickerIndex[index]===i?'badeg badge-positive':''" @click="pickerSwitch(index,i,obj.id)">{{obj.name}}</span>
          </div>
        </div>
      </div> -->
      <div class="list school-list" v-if="listData.length>0">
        <nuxt-link :to="{name:'zhiyuan-school-detail',query:{collegeId:item.collegeId}}" tag="a" class="item item-card item-icon-right item-avatar-left item-stripe" v-for="(item,index) in listData" :key="index">
          <img :src="item.schoolBadge | imgResize(50,50)" />
          <div class="item-content">
            <!-- <div class="name"> -->
            <h3>{{item.collegeName}}</h3>
            <!-- <span>{{item.city}}</span>
            </div> -->
            <span v-for="(level,i) in item.collegeLevelList" :key="i" class="stable">{{level.name}}</span>
            <span>{{item.collegeTypeName}}</span>
            <span>{{item.city}}</span>
          </div>
          <div class="button positive border-positive button-clear">
            查看详情
          </div>
        </nuxt-link>
      </div>
      <no-content v-else :text="text"></no-content>
      <paginate :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
    </div>
  </div>
</template>

<script>
import { api } from '@/utils'
import selectSort from '~/components/slot/select-sort'
import selectGrade from '~/components/slot/select-grade'
const COMPONENTS = {
  selectSort,
  selectGrade
}
export default {
  layout: 'zhiyuan',
  components: COMPONENTS,
  data () {
    return {
      selectSortVal: 1,
      pickerList: [],
      pickerIndex: [0, 0, 0, 0],
      params: {
        page: 0,
        size: 15,
        gradeId: 0,
        sortType: 1
      },
      page: 1,
      listData: [],
      totalElements: 0,
      text: '正在加载数据...'
    }
  },
  methods: {
    // 顶部筛选数据
    bindScreen (data) {
      for (let index in data) {
        this.params[index] = data[index]
      }
      this.params.page = 0
      this.page = 1
      this.getData()
    },
    // 录取概率
    bindSort (msg) {
      this.params.page = 0
      this.params.sortType = msg === 0 ? 2 : 1
      this.selectSortVal = msg * 1
      this.getData()
    },
    // 大学级别
    bindGrade (msg) {
      this.params.page = 0
      this.params.gradeId = msg
      this.getData()
    },
    search (e) {
      if (e.trim() !== '') {
        this.$store.commit('SET_SEARCH_VAL', e)
        this.$router.push(`search?fromWhere=${0}`)
      }
    },
    // pickerSwitch (index, i, id) {
    //   this.pickerIndex.splice(index, 1, i)
    //   let rel = this.pickerList[index].data[i]
    //   this.params[rel.type] = rel.id
    //   this.params.page = 0
    //   this.$set(this, 'page', this.params.page + 1)
    //   this.getData(this.params)
    // },
    getData () {
      let params = this.params
      for (let index in params) {
        if (params[index].length === 0) {
          delete params[index]
        }
      }
      this.$axios.get(api.zhiyuanQueryDynamicCollege, { params: params }).then(data => {
        if (data.content.length > 0) {
          this.listData = data.content
          this.totalElements = data.totalElements
        } else {
          this.listData = []
          this.totalElements = 0
          this.text = '暂无数据'
        }
      })
    },
    // 分页
    pagechange (currentPage) {
      console.log('--', currentPage)
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getData()
    }
  },
  beforeMount () {
    // this.$axios.get(api.zhiyuanQueryCollegeCondition).then(data => {
    //   for (let x in data) {
    //     data[x].unshift({
    //       id: null,
    //       name: '不限'
    //     })
    //     let obj = {}
    //     data[x].forEach((item, index) => {
    //       if (item.id === undefined || item.id === null) {
    //         item.id = ''
    //       }
    //       switch (x) {
    //         case 'provinces':
    //           item.type = 'provinceIdList'
    //           obj.title = '学校地区'
    //           obj.data = data[x]
    //           break
    //         case 'collegeLevels':
    //           item.type = 'collegeLevelIdList'
    //           obj.title = '学校类型'
    //           obj.data = data[x]
    //           break
    //         case 'collegeTypes':
    //           item.type = 'collegeTypeIdList'
    //           obj.title = '学校性质'
    //           obj.data = data[x]
    //           break
    //         case 'grades':
    //           item.type = 'gradeId'
    //           obj.title = '学校要求'
    //           obj.data = data[x]
    //           break
    //       }
    //       if (index === 0) {
    //         this.params[item.type] = item.id
    //       }
    //     })
    //     this.pickerList.push(obj)
    //   }
    // })
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .search {
      padding: 0;
      margin: 0;
      line-height: 30px;
      text-align: right;
      width: 50%;
      display: flex;
      justify-content: flex-end;
      >div{
        margin: 0;
      }
      input[type="text"] {
        padding-left: 30px;
        width: 90%;
      }
    }
  }
  .content {
    // flex: 1;
    // overflow-y: auto;
  }
}
.picker {
  padding: 0 26px 20px;
  margin: 0 -25px;
  background-color: $stable01;
  > div {
    display: flex;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    > span {
      width: 8%;
      margin-top: 20px;
    }
    > div {
      width: 90%;
      span {
        float: left;
        margin: 20px 30px 0 0;
        padding: 0 1px;
        cursor: pointer;
        transition: all 0.3s;
      }
    }
  }
}
.school-list {
  margin-top: 25px;
  .item {
    &-stripe {
      margin: 0 -20px;
    }
    h3 {
      // margin-bottom: 8px;
    }
    &-content {
      > span {
        margin-right: 8px;
      }
    }
  }
}
</style>
